<template>
  <div class="">
    <div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
      <div class="weui_search_outer">
        <div class="weui_search_inner">
          <i class="ion ion-ios-search"></i>
          <input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required=""
                 @blur="searchBlur">
          <a href="javascript:" class="ion ion-ios-close" id="search_clear" @click="searchClear"></a>
        </div>
        <label for="search_input" class="weui_search_text" @click='searchInit'>
          <i class="ion ion-ios-search"></i>
          <span>搜索</span>
        </label>
      </div>
      <a href="javascript:" class="weui_search_cancel" @click="searchOver">搜索</a>
    </div>


    <div class="nmlist" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
      <p>{{titleName}}
        <router-link :to="{path:'/SafeMenu/' + $route.params.id + '/' + typeName,query:{'empNo':empNo,'addReq':addReq,'typeName':typeName}}"
                     class="ion ion-android-add-circle soadd" tag="i">
        </router-link>
      </p>
      <ul v-if="$route.params.id == 'NM'">
        <router-link :to="{path:'/SafeMenu/NM/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>[{{ nmItem.typeName }}] {{nmItem.missDescribe}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交 </span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.missTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!-- safetogo -->
      <ul v-if="$route.params.id == 'STG'">
        <router-link :to="{path:'/SafeMenu/STG/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>

            <b>{{nmItem.s2oType}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交 </span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.s2oTime }} <i class="ion ion-ios-arrow-right"></i></span>

        </router-link>
      </ul>

      <!-- SOC -->
      <ul v-if="$route.params.id == 'SOC'">
        <router-link :to="{path:'/SafeMenu/SOC/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>

            <b>[{{ nmItem.typeName }}] {{nmItem.talkContent}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交 </span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.observeTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!-- 安全会议 -->
      <ul v-if="$route.params.id == 'SafeMeet'">
        <router-link :to="{path:'/SafeMenu/SafeMeet/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>

            <b>[{{ nmItem.emccName }}] {{nmItem.meetingSite}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交 </span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.meetingTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>
      <!--RA-->
      <ul v-if="$route.params.id == 'RA'">
        <router-link :to="{path:'/SafeMenu/RA/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>[{{ nmItem.driverName }}] {{nmItem.raSite}}</b>
            <span class="stateover">
              <span v-if="nmItem.state == 1 && nmItem.driverNo == empNo">待回复</span>
              <span v-else-if="nmItem.state == 1">进行中</span>
              <span v-if="nmItem.state == 2">已完成</span>
              <b v-if="nmItem.state == 0 && nmItem.rememberNo == empNo" @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.raTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!--任务RA-->
      <ul v-if="$route.params.id == 'raDialog'">
        <router-link :to="{path:'/SafeMenu/RA/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>[{{ nmItem.driverName }}] {{nmItem.raSite}}</b>
            <span class="stateover">
              <span v-if="nmItem.state == 1">进行中</span>
              <span v-if="nmItem.state == 2">已完成</span>
              <span v-if="nmItem.state == 0 && nmItem.driverNo == empNo">待回复</span>
              <b v-if="nmItem.state == 0 && nmItem.rememberNo == empNo" @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.raTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!-- 事故 -->
      <ul v-if="$route.params.id == 'accident'">
        <router-link :to="{path:'/SafeMenu/accident/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>{{nmItem.address}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交 </span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.incidentDate }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!-- 季度车检-->
      <ul v-if="$route.params.id == 'VEHICLE'">
        <router-link :to="{path:'/SafeMenu/VEHICLE/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>[{{nmItem.driveName}}] {{nmItem.checkCity}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交</span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.checkTime }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>

      <!-- JRA-->
      <ul v-if="$route.params.id == 'JRA'">
        <router-link :to="{path:'/SafeMenu/JRA/' + typeName,query:{id:nmItem.id,state:nmItem.state,empNo:empNo}}"
                     class="clearFix" v-for="(nmItem,index) in nmList" tag="li">
          <p>
            <b>{{nmItem.routeBegin}} - {{nmItem.routeEnd}}</b>
            <span class="stateover">
              <span v-if="nmItem.state != 0">已提交</span>
              <b v-else @click.stop="delList(index,nmItem)">删除</b>
            </span>
          </p>
          <span>{{ nmItem.jraDate }} <i class="ion ion-ios-arrow-right"></i></span>
        </router-link>
      </ul>


      <div class="no_data" v-if="!nmList.length">
        <i class="ion ion-ios-paper-outline"></i>
        <p>暂无数据
        </p>
      </div>
    </div>
    <loading v-if="loadShow"></loading>

    <toast v-if="toastShow" :message="tipMessage"></toast>

    <dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog='deleteClose'
                @cancle-dialog='closeDialog'></dialog-box>
  </div>
</template>

<script type="text/javascript">
  import safeUrl from '../../assets/js/insterface'
  import http from '../../assets/js/http_mixin'

  export default {
    data() {
      return {
        typeName: '',
        empNo: '',
        nmList: [],
        urlType: '',
        delType: '',
        deleteId: '',
        isFocus: false,

        titleName: '',
        tipMessage: '',

        pageTotle: '',
        count: 0,
        busy: false,
        addReq:false
      }
    },
    mixins: [http],
    mounted() {
      // debugger;
      this.empNo = this.$route.query.empNo;
      console.log(this.$route.query.addReq)
      this.addReq = this.$route.query.addReq
      switch (this.$route.params.id) {
        case 'NM':
          //执行NM接口文档列表，将数据塞到上面data中''
          document.title = "Near Miss列表";
          this.titleName = "Near Miss列表";
          this.urlType = safeUrl.nmData;
          this.delType = safeUrl.nmDelete;
          this.nmInitList();
          break;
        case 'STG':
          document.title = "Safe2go列表";
          this.titleName = "Safe2go列表";
          this.urlType = safeUrl.stgData;
          this.delType = safeUrl.stgDelete;
          this.nmInitList();
          break;
        case 'SOC':
          document.title = "SOC列表";
          this.titleName = "SOC列表";
          this.urlType = safeUrl.socData;
          this.delType = safeUrl.socDelete;
          this.nmInitList();
          break;
        case 'SafeMeet':
          document.title = "会议纪要列表";
          this.titleName = "会议纪要列表";
          this.urlType = safeUrl.smData;
          this.delType = safeUrl.smDelete;
          this.nmInitList();
          break;
        case 'RA':
          document.title = "Ride Along列表";
          this.titleName = "Ride Along列表";
          this.urlType = safeUrl.raData;
          this.delType = safeUrl.raDelete;
          this.nmInitList();
          break;
        case 'raDialog':
          document.title = "Ride Along列表";
          this.titleName = "Ride Along列表";
          this.urlType = safeUrl.raData;
          this.delType = safeUrl.raDelete;
          this.nmInitList();
          break;
        case 'accident':
          document.title = "事故报告列表";
          this.titleName = "事故报告列表";
          this.urlType = safeUrl.vehicleIncidentList;
          this.delType = safeUrl.vehicleIncidentDelete;
          this.nmInitList();
          break;
        case 'VEHICLE':
          document.title = "季度车检列表";
          this.titleName = "季度车检列表";
          this.urlType = safeUrl.checkData;
          this.delType = safeUrl.checkDelete;
          this.nmInitList();
          break;
        case 'JRA':
          document.title = "道路风险评估列表";
          this.titleName = "道路风险评估列表";
          this.urlType = safeUrl.jraList;
          this.delType = safeUrl.jraDelete;
          this.nmInitList();
          break;
        default:
      }
    },
    methods: {
      loadMore() {
        var vue = this;
        this.busy = true;
        if (this.pageTotle > this.count && this.nmList.length > 0) {
          vue.nmInitList();
        }
      },
      delList(index, item) {
        this.dialogShow = true;
        this.dialogMessage = '确认删除？';
        this.deleteId = item.id;
      },
      deleteClose() {
        var vue = this;
        this.dialogShow = false;
        this.getInfo({
          url: this.delType,
          param: {id: vue.deleteId},
          success(response) {
            console.log("111");
            vue.toastShow = true;
            // debugger;
            vue.tipMessage = response.data.msg;
            setTimeout(function () {
              vue.toastShow = false;
              vue.nmList = [];
              vue.count = 0;
              vue.nmInitList();
            }, 1500);

            console.log("删除成功");
          },
          fail(response) {
            console.log(response);
          }
        });

      },
      nmInitList() {
        var vue = this;
        const params = {
          currentPage: this.count,
          pageSize: '10',
          empNo: this.empNo,
          searchParam: this.$refs.searchInput.value
        };
        // debugger;
        this.getInfo({
          url: this.urlType,
          param: params,
          success(response) {
            // debugger;
            //console.log(response);
            this.typeName = response.data.typeName;
            var resopnseData = response.data.data;
            this.pageTotle = response.data.pages;
            if (this.pageTotle >= this.count) {
              // debugger;
              if (resopnseData.length > 0) {
                for (var i = 0; i < resopnseData.length; i++) {
                  this.nmList.push(resopnseData[i]);
                }
                this.count++;
              }
            }
            this.busy = false;
          },
          fail(response) {
            console.log(response);
          }
        })
      },


      //这个是搜索的地方
      searchOver() {
        this.nmList = [];
        this.count = 0;
        this.nmInitList();
      },
      searchInit() {
        this.isFocus = true;
        let searchInput = this.$refs.searchInput;
        searchInput.focus();
      },
      searchBlur(){
        let searchInput = this.$refs.searchInput;
        this.isFocus = true;
      },
      searchClear(){
        this.nmList = [];
        this.count = 0;
        let searchInput = this.$refs.searchInput;
        searchInput.value = '';
        this.nmInitList();
        //this.getSafetyLoopData();
      }
    }
  }
</script>
